<template>
  <div class="dad">
     <div class="add">
         <input type="text" v-model="something">
         <button @click="add()">添加</button>
     </div>
     <div class="c">
        <div class="left">
           <List :list="arr" @egz="getV"/>
        </div>
        <div class="right">
            <Did :did="did"/>
        </div>
     </div>
  </div>
</template>

<script>
import List from "./List.vue";
import Did from"./Did.vue";
export default {
    
    name:"Dad",
    data(){
        return{
           arr:[
              {du:"睁眼",t:new Date().getTime()},
              {du:"起床",t:new Date().getTime()},
               ],
           something:'',
           did:""
        }
    },
    methods:{
       add(){
           var obj={}
           obj.du=this.something
           obj.t=new Date().getTime()
           this.arr.push(obj)
       },
       getV(v){
        //    console.log(this.arr[v])
           this.did=this.arr[v]
           this.arr.splice(v,1)
       }
    },
    components:{
        List,
        Did
    }
}
</script>

<style>
.add{
    border: 1px solid red;
    width: 80%;
    margin: 30px auto;
}
.c{
    border: 1px solid black;
    display: flex;
    width: 80%;
    height: 400px;
    margin: 30px auto;
    
}
.left,.right{
    flex: 1;
}
.left{
    border-right: 1px solid black;
}

</style>